/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : May 1, 2016, 12:51:52 PM
    Author     : Robin Raina
*/
body
{
    font-family: lucida grande, tahoma,verdana,arial,sans-serif;
    background-color: #fff;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}



.scrollup {
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 50px;
    right: 100px;
    display: none;
    float: right;
    text-indent: -9999px;
    background-image : url('../Images/up.png');
    background-color: #000;
}


body p
{
    font-size: 0.8em;
    line-height: 1.28;
    
}

.cursivegrayheaderh1
{
    text-align: center;
    margin: 15px;
    font-family: cursive;
    color: gray;
}
.plaingrayheaderh2
{
    text-align: center;
    margin: 15px;font-family: cursive;
    color: gray;
    font-size: 1.2em;
    line-height: 1.28;
}
.plaingrayheaderh3
{
    text-align: center;
    margin: 15px;
    color: gray;
    font-size: 0.8em;
    line-height: 1.28;
}

.plaingrayheaderh4
{
    text-align: center;
    margin: 15px;
    color: gray;
    font-size: 1.1em;
    line-height: 1.28;
}

.welcomeheader
{
    float: right;
    text-align: right;
    margin: 10px;
    color: white;
    font-size: 1.1em;
    line-height: 1.28;
}

.whycarpoolborderlesstable {
    border: 0;
    width: 100%;
    background-color: white;
    border-collapse: collapse;
}
 .whycarpoolborderlesstable th
 {
      border: 0;
       background-color: white;
 }
 .whycarpoolborderlesstable td
 {
      border: 0;
      width: 33.3333%;
      background-color: white;
 }
 
 .stepsforwhycarpoolborderlesstable {
    border: 0;
    width: 100%;
    background-color: white;
    border-collapse: collapse;
}
 .stepsforwhycarpoolborderlesstable th
 {
       border: 0;
       background-color: white;
 }
 .stepsforwhycarpoolborderlesstable td
 {
      border: 0;
      width: 25%;
      background-color: white;
 }
 
  .testimonialcarpoolborderlesstable {
    border: 0;
    width: 100%;
    background-color: white;
    border-collapse: collapse;
}
 .testimonialcarpoolborderlesstable th
 {
       border: 0;
       background-color: white;
 }
 .testimonialcarpoolborderlesstable td
 {
      border: 0;
      width: auto;
      background-color: white;
 }
 
 .offerridetable {
    border: 0;
    width: 100%;
    background-color: white;
    border-collapse: collapse;
}
 .offerridetable th
 {
      border: 0;
       background-color: white;
 }
 .offerridetable td
 {
      border: 0;
      width: 33.3333%;
      background-color: white;
 }
 
 
  .footertable {
    border: 0;
    width: 100%;
    color: white;
    background-color: #3d3d29;
    border-collapse: collapse;
}
 .footertable th
 {
       border: 0;
        color: white;
       background-color: #3d3d29;
 }
 .footertable td
 {
      border: 0;
      width: 25%;
       color: white;
      background-color: #3d3d29;
 }
 
 #footerlink a:link {
     color: white;
    text-decoration: none;
}

 #footerlink a:visited {
    text-decoration: none;
    color: white;
}

 #footerlink a:hover {
    text-decoration: underline;
    color: white;
}

 #footerlink a:active {
    text-decoration: underline;
    color: white;
}
 
.img-circle {
        border-radius: 50%;
    }
.round-button {
display:block;
width:50px;
height:50px;
line-height:50px;
border: 2px solid #f5f5f5;
border-radius: 50%;
color:#f5f5f5;
text-align:center;
text-decoration:none;
background: #464646;
box-shadow: 0 0 3px gray;
font-size:20px;
font-weight:bold;
}
.round-button:hover {
    background: #262626;
}

.borderlesstable {
    border: 0;
    border-collapse: collapse;
    background-color:   whitesmoke;
}
 .borderlesstable th
 {
      border: 0;
       background-color:   whitesmoke;
 }
 .borderlesstable td
 {
      border: 0;
       background-color:   whitesmoke;
 }
 
 .borderlesstable1 {
    border: 1;
    border-collapse: collapse;
    background-color:   lightgoldenrodyellow;
}
 .borderlesstable1 th
 {
      border: 0;
       background-color:   lightgoldenrodyellow;
 }
 .borderlesstable1 td
 {
      border: 0;
       background-color:   lightgoldenrodyellow;
 }
 
 
 .borderlesstablewhitebackground {
    border: 0;
    border-collapse: collapse;
    background-color:   white;
}
 .borderlesstablewhitebackground th
 {
      border: 0;
       background-color:   white;
 }
 .borderlesstablewhitebackground td
 {
      border: 0;
       background-color:   white;
 }

table, th, td {
    border: 0.5px solid black;
    border-collapse: collapse;
    background-color: #ebebe0;
}
th, td {
    padding: 5px;
}

.coffeeTable
{
    width: 750px;
    height: 250px;
    margin: 10px 10px 10px 0;
    border: 3px solid #E3E3E3;
    border-radius: 10px;
    moz-border-radius: 10px;
}

.coffeeTable tr th, .coffeeTable tr td
{
    text-align: left;
    padding: 0px 5px 0 5px;
}

.coffeeTable img
{
    padding: 0px 10px 10px 10px;
    height: 150px;
    width: 150px;
}

 input[type='text']
 {
    width: auto;
    height: 40px;
    margin: 10px;
 }
 input[type='password']
 {
    width: auto;
    height: 40px;
    margin: 10px;
 }
 
  .googleinput[type='text']
 {
    width: 350px;
    height: 40px;
    margin: 10px;
    border: 1px solid;
 }
 
   .dateinput[type='text']
 {
    width: 150px;
    height: 32px;
    margin: 10px;
    border: 1px solid;
 }
 
  .datepickerinput[type='text']
 {
    background: white url(../Images/calendar.ico) left no-repeat;
    text-indent: 32px;
    width: 150px;
    height: 32px;
    margin: 10px;
    border: 1px solid;
 }
 
 option {
     width: auto;
    height: 25px;
    margin: 10px;
 }
 
 
 .button {
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 10px;
    cursor: pointer;
    border-radius: 8px;
    transition-duration: 0.4s;
}


.button:hover {
    background-color: #e62e00; /* Blue */
    color: white;
}

.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color:  #ff471a;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
.button6 {background-color: #008CBA;float: right} /* Black */
.button7 {background-color: #1f1f14;} /*light blue shiny */
.button8 {background-color: #80aaff;} /*light gray */
 
 
label 
{
color: black;
font-weight: bold;
font-size: 20px;
display: block;
width: 250px;
text-align: left; 
clear: both;
float:left;
margin: 10px;
vertical-align: central;
}

#wrapper{
    background-color: white;
    margin: 0 auto;
    padding: 5px;
    border : 5px solid #dedede;
}

#wrapperblack{
    background-color: white;
    margin: 0 auto;
    padding: 5px;
    border : 1px solid lightgray;
}

#container {
    background-size: cover;
    border : 2px solid ;
    height : 400px;
    position: relative;
}

#proflecontainer {
    background-size: cover;
    border : 2px solid  #dedede;
    height : 100%;
    position: relative;
}

#overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50px;
    left: 50px;
    color: red;
    font-size: 40px;
    z-index: 10;
}

#base {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

#overlay1 {
    position: absolute;
    top: 50px;
    left: 50px;
    color: red;
    font-size: 40px;
    z-index: 10;
}

#banner
{
    background-size: cover;
    border : 2px solid ;
    height : 320px;

}

.mySlides {display:none;}

.parent {
    position: relative;
}

.parent .center-wrapper {
    position: absolute;
    left: 50%;
}

.parent .center-wrapper .center-content {
    position: relative;
    left: -50%;
}

#content_area
{
    float : left;
    width : 750px;
    margin : 20px 0 20px 0;
    padding :10px;
}

#sidebarright
{
    float: right;
    width : 250px;
    height : 400px;
    margin : 20px 10px;
    padding:10px;
    border : 2px solid #E3E3E3;
    
}

#sidebarleft
{
    float: left;
    width : 200px;
    height : 400px;
    margin : 20px 10px;
    padding:10px;
    border : 2px solid #E3E3E3;
    
}

#findridesidebarleft
{
    float: left;
    width : 290px;
    height : 850px;
    margin : 5px;
    padding: 5px;
    border : 2px solid #E3E3E3;  
}


#navigationsidebar
{
    float: left;
    width : 150px;
    height : 100%;
    margin : 20px 10px;
    padding:10px;
    border : 2px solid #E3E3E3;
    
}

footer
{
    clear : both;
    width: auto;
    height : auto;
    padding : 10px;
    border : 3px solid #E3E3E3;
    text-align: center;
    color: white;
    background-color:#3d3d29;  
    font-size: small;
    
}


.form-signin {
            max-width: auto;
            padding: 15px;
            margin: 0 auto;
            color: #000000;
         }
         
         .form-signin .form-signin-heading,
         .form-signin .checkbox {
            margin-bottom: 10px;
         }
         
         .form-signin .checkbox {
            font-weight: normal;
         }
         
         .form-signin .form-control {
            position: relative;
            height: auto;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 10px;
            font-size: 16px;
         }
         
         .form-signin .form-control:focus {
            z-index: 2;
         }
         
          .form-signin input[type="text"] {
            margin-bottom: 10px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-width:0.5px;
            border-style:solid;
            border-color:#000000;
         }
         
         
         .form-signin input[type="email"] {
            margin-bottom: 10px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-width:0.5px;
            border-style:solid;
            border-color:#000000;
         }
         
         .form-signin input[type="password"] {
            margin-bottom: 10px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-color:#000000;
            border-width:0.5px;
            border-style:solid;
         }
         
         
         
         .form-offerride {
            padding: 5px;
            margin: 0 auto;
         }
         
         .form-offerride .form-offerride-heading,
         .form-offerride .checkbox {
            margin-bottom: 10px;
         }
         
         .form-offerride .checkbox {
            font-weight: normal;
         }
         
         .form-offerride .form-control {
            position: relative;
            height: auto;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 10px;
            font-size: 16px;
         }
         
         .form-offerride .form-control:focus {
            z-index: 2;
         }
         
         
         
         h2{
            text-align: center;
             color: #009933;
            font-size: large;
         }
         
.verticalLine {
    border-left: thick solid #ff0000;
    margin-left: 50%;   
}

.circle
    {
    width:120px;
    height:120px;
    border-radius:60px;
    font-size:16px;   
    color:black;
    line-height:120px;
    text-align:center;
    }
    
    .redcircle {background: lightcoral}
    .greencircle{background: lightgreen}
     .bluecircle{background: lightseagreen}
     
     .imgcircle
    {
    width:100px;
    height:100px;
    border-radius:60px;
    font-size:60px;
    color:#fff;
    line-height:100px;
    text-align:center;
    }
    

#navigation
{
    height: 72px;
    border : 5px solid #E3E3E3;
    margin-top : 5px;
}

#innernavigation
{
    height: 45px;
    border : 3px solid #E3E3E3;
    margin-top: 5px;
}

#logintablenavigation
{
    height: auto;
    border : 5px solid #E3E3E3;
    margin-top: 5px;
    min-width: 500px;
    
}




ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
     margin: 5px;         
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #4CAF50;
}

a.active {
    background-color: #4CAF50;
}

 /* Add a gray right border to all list items, except the last item (last-child) */
li {
    border-right: 1px solid #bbb;
}

li:last-child {
    border-right: none;
}


.innerpagenav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
       text-align: center;
    background-color: #3f8abf; 
     height: 40px;
}

.innerpagenav li {
    float: left;
    text-align: center;
}

.innerpagenav li a {
    
    color: white;
    text-decoration: none;
}

.innerpagenav li a:hover:not(.active) {
    background-color: #111;
}

.innerpagenav .active {
    background-color: darkorange;
}

.innerpagenav a.active {
    background-color: darkorange;
}

 /* Add a gray right border to all list items, except the last item (last-child) */
.innerpagenav li {
    border-right: 1px solid #bbb;
}

.innerpagenav li:last-child {
    border-right: none;
}


/*Inner Navigation Vertical   */
.innerpagenavigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #f1f1f1;
    text-align: center;
    height: 100%;
    overflow: auto;
}

.innerpagenavigation li 
{
   border-right: none;
   width: 100%;
}

.innerpagenavigation li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

.innerpagenavigation li a.active {
    background-color: #4CAF50;
    color: white;
}

.innerpagenavigation li a:hover:not(.active) {
    background-color: #555;
    color: white;
}


.innerpagenavigation .active {
    background-color: #bbb;
}

.innerpagenavigation a.active {
    background-color: #bbb;
}



/*My Account Navigation Vertical  Left */
.accountpagenavigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: whitesmoke;
    text-align: center;
    height: 100%;
    overflow: auto;
}

.accountpagenavigation li 
{
   border-right: none;
   width: 100%;
}

.accountpagenavigation li a {
    display: block;
    color: black;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

.accountpagenavigation li a.active {
    background-color: #4CAF50;
    color: white;
}

.accountpagenavigation li a:hover:not(.active) {
    background-color: grey;
    color: white;
}


.accountpagenavigation .active {
    background-color: grey;
}

.accountpagenavigation a.active {
    background-color: grey;
}



.graphstyle {
    position: relative;
}
.graphstyle:hover:after {
    content: ' ';
    background-image: url(../Images/Untitled.png);
    position: absolute;
    top: 10px;
    left: 10px;
    height: 523px;
    width: 661px;   
}
#graphsidebar
{
    float: right;
    width : 525px;
    margin : 20px 10px;
    padding:10px;
    border : 2px solid #E3E3E3;
    
}

.hyperlinkstyle a {
    color: white;
    text-align: center;
    text-decoration: none;
}

.animateddiv {
    width: 40px;
    height: 40px;
    position: relative;
    -webkit-animation: mymove 5s ; /* Chrome, Safari, Opera */
    -webkit-animation-delay: 2s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s ;
    animation-delay: 2s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}


.linkbutton {
    background:none!important;
     border:none; 
     padding:0!important;
    
    /*optional*/
    font-family:arial,sans-serif; /*input has OS specific font-family*/
    font-size: medium;
     color:blue;
     text-decoration:underline;
     cursor:pointer;
     margin-bottom: 15px;
}


.linkbutton:hover {
    color: darkorange;
}


ul.pagination {
    background-color: graytext;
    text-align: center;
    vertical-align: central;
    color: yellow;
    font-weight: bold;
}

ul.pagination li {
    display: inline;
    text-align: center;
     padding: 8px 16px;
     transition: background-color .3s;
     border-right:none;
}

ul.pagination li a {
    color: white;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
}

ul.pagination li a:active {
     text-decoration: none;
    background-color: #4CAF50;
    color: white;
    float: left;
    padding: 8px 16px;
    border: 1px solid #4CAF50;
}



ul.pagination li a:hover:not(.active) {background-color: #ddd;}


div.ui-slider-range.ui-widget-header {
    background: greenyellow;
}

.scrollup {
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 50px;
    right: 100px;
    display: none;
    text-indent: -9999px;
    background: url('../Images/up.png') no-repeat;
    background-color: transparent;
}


#loading {
    position: absolute; text: 'loading...'; width: 90%; height: 90%; background: url('../Images/loading2.gif') no-repeat center center;
}


ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {float: left;}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {background-color: #555;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:768px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:768px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}